﻿<div class="span9">
    <ul class="breadcrumb">
        <li><a href="index.html">Home</a> <span class="divider">/</span></li>
        <li class="active">Products</li>
    </ul>
    <hr class="soft" />
    <p>
        We are LES FEMMES FATALES, providers of weaponry, diguises, and surveillance products for dangerous women. Be afraid... Be very afraid.
    </p>
    <hr class="soft" />

    <!-------------------This is the SORT function for the items.-------------------->
    <form class="form-horizontal span6">
        <div class="control-group">
            <label class="control-label alignL">Sort By </label>
            <select>
                <option>Price: Highest to Lowest</option>
                <option>Price: Lowest to Highest</option>
            </select>
        </div>
    </form>

    <!-------------------This is the LIST VIEW for the items.-------------------->
    <div id="myTab" class="pull-right">
        <a href="#listView" data-toggle="tab"><span class="btn btn-large"><i class="icon-list"></i></span></a>
        <a href="#blockView" data-toggle="tab"><span class="btn btn-large btn-primary"><i class="icon-th-large"></i></span></a>
    </div>
    <br class="clr" />
    <div class="tab-content">
        <div class="tab-pane" id="listView">

      <!-------------------This is the repeat format for each item.-------------------->
            <div class="row" ng-repeat="gadget in Gadgets | filter: search | orderBy: sortExpression">
                <div class="span2">
                    <img src="{{gadget.TopPict}}" alt="" />
                </div>
                <div class="span4">
                    <h3>New | Available</h3>
                    <hr class="soft" />
                    <h5>{{gadget.Name}}</h5>
                    <p>
                        {{gadget.Description}}
                    </p>
                    <a class="btn btn-small pull-right" href="product_details.html">View Details</a>
                    <br class="clr" />
                </div>
                <div class="span3 alignR">
                    <form class="form-horizontal qtyFrm">
                        <h3>{{gadget.Price}}</h3>
                        <br />
                        <a href="shopping_cart.html" class="btn btn-large btn-primary">Add to <i class=" icon-shopping-cart"></i></a>
                    </form>
                </div>
            </div>
            </div>
       <hr class="soft" />
    <!-------------------This is the repeat format for each item.-------------------->
         </div>

    <!-------------------This is the PHOTO VIEW for the items.-------------------->
        <div class="tab-pane  active" id="blockView">
            <ul class="thumbnails">
                <!-------------------This is the repeat format for each item.-------------------->
                <li class="span3">
                    <div class="thumbnail">
                        <a href="product_details.html"><img src="themes/images/products/3.jpg" alt="" /></a>
                        <div class="caption">
                            <h5>{{gadget.Name}}</h5>
                            <p>
                                {{gadget.Description}}<br />
                                <strong>{{gadget.Price}}</strong>
                            </p>
                            <h4 style="text-align:center"><a class="btn" href="product_details.html">
                            <i class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i class="icon-shopping-cart"></i></a></h4>
                        </div>
                    </div>
                </li>
                <!-------------------This is the repeat format for each item.-------------------->
            </ul>
            <hr class="soft" />
        </div>
    </div>

